<template>
  <my-upload v-model="showDialog" :class="{
    'cropper-mobile': !$q.screen.gt.sm,
    'light-theme': !dark,
    'dark-theme': dark,
  }" :dark="dark" :height="160" :lang-ext="langExt" :noRotate="false" :width="160" class="cropper absolute-full"
    img-format="png,jpg,gif" @srcFileSet="srcFileSet" @crop-success="cropSuccess" @crop-upload-success="cropUploadSuccess"
    @crop-upload-fail="cropUploadFail"></my-upload>
</template>
<script>
import gql from 'graphql-tag';
import { print as printGraphQL } from 'graphql/language/printer';
import { mapActions, mapState } from 'pinia';


import myUpload from 'vue-image-crop-upload';

import { useUiStore } from 'src/stores/UI';
import { useCurrentUserStore } from '../stores/current-user';
import { changeAvatar } from 'src/queries/mutations';

export default {
  name: 'ChangeAvatarDialog',
  components: { myUpload },
  props: {
    objId: {
      type: Number,
      required: true,
    },
    showChangeAvatarDialog: { type: Boolean, default: false },
  },
  emits: ['update:showChangeAvatarDialog'],
  data() {
    return {
      dark: false,
      langExt: {
        hint: 'Кликните или перенесите сюда файл изображения',
        loading: 'Загружаю…',
        noSupported:
          'Браузер не поддерживается. Пожалуйста используйте IE10+ или другой браузер',
        success: 'Загрузка успешна',
        fail: 'Загрузка не удалась',
        preview: 'Предпросмотр',
        btn: {
          off: 'Отмена',
          close: 'Закрыть',
          back: 'Назад',
          save: 'Сохранить',
        },
        error: {
          onlyImg: 'Файл не является изображением',
          outOfSize: 'Файл превышает лимит: ',
          lowestPx: 'Файл слишком маленький. Должен быть больше: ',
        },
      },

      imgDataUrl: '',
      imgBlob: null,
    };
  },
  methods: {
    ...mapActions(useCurrentUserStore, ['setAvataro', 'getMe']),

    srcFileSet(fileName, fileType, fileSize) {
      // console.log(arguments);
    },
    /**
     * crop success
     *
     * @param imgDataUrl
     * @param field
     */
    async cropSuccess(imgDataUrl, field) {
      this.imgDataUrl = imgDataUrl;
      await fetch(imgDataUrl)
        .then((res) => res.blob())
        .then((blob) => {
          this.imgBlob = blob;
        });
      this.submitAvataro();
    },
    /**
     * upload success
     *
     * @param jsonData  server api return data, already json encode
     * @param field
     */
    cropUploadSuccess(jsonData, field) {
      console.log('-------- upload success --------');
      console.log(jsonData);
      console.log('field: ' + field);
    },
    /**
     * upload fail
     *
     * @param status    server api return error status, like 500
     * @param field
     */
    cropUploadFail(status, field) {
      console.log('-------- upload fail --------');
      console.log(status);
      console.log('field: ' + field);
    },

    onReset() {
      this.showDialog = false;
    },

    postAvataro() {
      const formData = new FormData();
      formData.append('query', printGraphQL(changeAvatar));
      formData.append('variables', JSON.stringify({ id: this.objId }));

      function blobToFile(blob, name) {
        function fileExtension(type) {
          if (type.startsWith('image')) {
            let ext = type.slice(6);
            if (ext === 'jpeg') ext = 'jpg';
            return ext;
          } else return 'unknown';
        }

        return new File([blob], `${name}.${fileExtension(blob.type)}`, {
          type: blob.type,
        });
      }

      const baseFile = blobToFile(this.imgBlob, 'baza');

      // тут проверяю получившиеся файлы. скачиваю чтоб пощупать
      /*
             function downloadFile(file){

               let url = URL.createObjectURL(file)
               let a = document.createElement('a');
               a.download = file.name;
               a.href = url;
               a.click();
               URL.revokeObjectURL(url);


             }
             downloadFile(baseFile)
      */

      formData.append('bildoBaza', baseFile);

      // formData.forEach((value, key) => console.log(key, value));
      const headers = {
        'Content-Type': 'multipart/form-data',
      };
      if (this.jwt != 'null' && this.jwt !== null) {
        headers['Authorization'] = `JWT ${this.jwt}`;
      }
      return this.$axios
        .post('', formData, {
          headers,
        })
        .then((response) => {
          const resp = response.data.data.instaliAvataron;
          if (resp.status) {
            return Promise.resolve(resp);
          } else {
            for (const key in resp.errors) {
              console.log(resp.errors[key].message);
            }
            // console.log(response);
            return Promise.reject(new Error(resp.message));
          }
        })
        .catch((e) => {
          return Promise.reject(e);
        });
    },

    submitAvataro() {
      // this.postAvataro()

      //попытка перевести запрос с аксиос на аполло. Неудачно. Аполло не хочет принимать бинарники, а бакенд не хочет принимать base64

      // const params = {
      //   id: this.objId,
      //   baza: this.avatarBaseBlob,
      //   full: this.avatarMaxURLBlob,
      //   min: this.avatarMinURLBlob,
      // };
      // const formData = new FormData();
      // formData.append('variables', JSON.stringify({id: this.objId}));
      // formData.append('bildoBaza', this.avatarBaseBlob);
      // formData.append('bildoAvataro', this.avatarMaxURLBlob);
      // formData.append('bildoAvataroMin', this.avatarMinURLBlob);
      //
      // this.$store.dispatch('uzanto/changeAvatar', params)

      this.postAvataro()
        .then((resp) => {
          console.log(resp.message);
          // this.setAvataro(resp.avataro);
          this.getMe();
          this.showDialog = false;
        })
        .catch((e) => {
          console.error(e);
          this.showDialog = false;
        });
    },
  },
  computed: {

    ...mapState(useCurrentUserStore, ['jwt']),
    cropperStyle: function () {
      if (this.dark) {
        return 'dark-theme';
      } else {
        return 'light-theme';
      }
    },
    showDialog: {
      get: function () {
        return this.showChangeAvatarDialog ?? false;
      },
      set: function (payload) {
        this.$emit('update:showChangeAvatarDialog', payload);
      },
    },
  },
};
</script>
<style lang="scss">
.cropper-mobile {
  .vicp-wrap {
    width: 291px;
    height: 550px;

    .vicp-step1 .vicp-drop-area {
      height: 250px;
    }

    .vicp-step2 .vicp-crop .vicp-crop-right {
      float: left;
      width: 240px;
    }
  }
}

.cropper {
  .vicp-wrap {
    .vicp-operate {
      a {
        color: darkblue;
      }
    }

    .vicp-step2 .vicp-crop .vicp-crop-right .vicp-preview {
      padding-right: 3px;
    }
  }
}

.dark-theme {
  .vicp-wrap {
    background: #121212;

    .vicp-operate {
      a {
        color: white;
      }
    }

    .vicp-step1 .vicp-drop-area .vicp-hint {
      color: darkgrey;
    }
  }
}

.light-theme {
  .vicp-wrap {
    background: white;

    .vicp-operate {
      a {
        color: #1d1d1d;
      }

      .vicp-step1 .vicp-drop-area .vicp-hint {
        color: darkgrey;
      }
    }
  }
}
</style>
